import React from 'react'
import { Breadcrumb, PageHeader } from 'antd'
import { Link, useLocation } from 'react-router-dom'
import { rpc } from 'utils'
import _ from 'lodash'
import { useBus } from 'utils/hooks'

function itemRender(route, params, routes) {
  const last = routes.indexOf(route) === routes.length - 1
  return last ? (
    <span>{route.breadcrumbName}</span>
  ) : route.path ? (
    <Link to={route.path}>{route.breadcrumbName}</Link>
  ) : (
    <span>{route.breadcrumbName}</span>
  )
}

const getMenuData = (data, list) => list.find(v => v.url === data)

const getParentList = (list, id) => list.find(v => v.menuId === id)

const getRouters = (list, id, routes) => {
  const parentList = getParentList(list, id)
  routes.push({
    path: parentList.url,
    breadcrumbName: parentList.name,
  })
  if (parentList.parentId !== 0) {
    getRouters(list, parentList.parentId, routes)
  } else {
    return routes
  }
}

export default function PageWrapper(props) {
  const { children, bodyStyle } = props
  const [routes, setRoutes] = React.useState([])
  const [title, setTitle] = React.useState()
  const [title2, setTitle2] = React.useState()
  const [menuData, setMenuData] = React.useState(null)
  const [pathname, setPathname] = React.useState(null)
  const [headFixd, setHeadFixd] = React.useState(0)
  const location = useLocation()
  const isLoaded = React.useRef(false)

  useBus('@/root/modeDate', opt => {
    setTitle2(
      opt.mode === 'add'
        ? '-新增'
        : opt.mode === 'update'
        ? '-修改'
        : opt.mode === 'more'
        ? '-详细信息'
        : ''
    )
  })

  React.useEffect(() => {
    rpc.remote.pageHeaderinfo().then(({ menuData, pathname, headFixd }) => {
      setMenuData(menuData)
      setPathname(pathname)
      setHeadFixd(headFixd)
    })
  }, [location.pathname])

  React.useEffect(() => {
    if (isLoaded.current) return
    if (menuData && pathname) {
      isLoaded.current = true
      let Npathname = pathname
      if (pathname.indexOf('iframe') > 0) {
        const path = decodeURIComponent(pathname.split('/')[2])
        Npathname = path
      }
      const data = getMenuData(Npathname, menuData)
      setTitle(data ? data.name : null)
      if (data) {
        let list = [
          {
            path: '/home',
            breadcrumbName: `首页`,
          },
        ]
        let routes = getRouters(menuData, data.parentId, list)
        routes.push({ path: data.url, breadcrumbName: data.name })
        setRoutes(_.uniqBy(routes, 'breadcrumbName'))
      }
    }
  }, [menuData, pathname])

  return (
    <div>
      {menuData ? (
        <PageHeader
          ghost={false}
          style={
            headFixd
              ? {
                  paddingTop: 6,
                  paddingBottom: 12,
                  position: 'sticky',
                  zIndex: 99,
                  top: 0,
                }
              : { paddingTop: 6, paddingBottom: 12 }
          }
        >
          <Breadcrumb itemRender={itemRender} routes={routes} />
          <div
            style={{
              fontSize: 20,
              fontWeight: 800,
              color: 'rgb(0,0,0,0.85)',
              lineHeight: '32px',
            }}
          >
            {title}
            {title2}
          </div>
        </PageHeader>
      ) : null}
      <div style={{ padding: '16px', ...bodyStyle }}>{children}</div>
    </div>
  )
}
